<template>
  <div class="schedule">
    <h1>任务计划</h1>

    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
    >
      <a-form-model-item ref="task_name" label="任务名称：" prop="task_name">
        <a-input
          v-model="form.task_name"
          @blur="
          () => {
            $refs.task_name.onFieldBlur();
          }
        "
        />
      </a-form-model-item>
      <a-form-model-item label="请选择主机：" prop="hosts">
        <a-select
          mode="multiple"
          :value="form.hosts"
          style="width: 100%"
          placeholder="请选择主机"
          @change="handleHostChange"
        >
          <a-select-option v-for="(host_value,host_index) in host_list" :key="host_index" :value="host_value.id">
            {{ host_value.ip_addr }}--{{ host_value.hostname }}
          </a-select-option>
        </a-select>


      </a-form-model-item>
      <a-form-model-item label="请选择周期方式：" prop="hosts">
        <a-select style="width: 120px" @change="handlePeriodChange">
          <a-select-option v-for="(period_value,period_index) in period_way_choices" :value="period_value[0]"
                           :key="period_index">
            {{ period_value[1] }}
          </a-select-option>

        </a-select>


      </a-form-model-item>

      <a-form-model-item ref="period_content" label="任务周期值：" prop="period_content">
        <a-input v-model="form.period_content"/>
      </a-form-model-item>

      <a-form-model-item ref="period_content" label="任务指令：" prop="period_content">
        <editor v-model="form.task_cmd" @init="editorInit" lang="html" theme="chrome" width="500" height="300"></editor>
      </a-form-model-item>

      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="onSubmit">
          添加任务
        </a-button>
        <a-button style="margin-left: 10px;" @click="resetForm">
          重置任务
        </a-button>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>
<script>
export default {
  name: 'Schedule',
  data() {
    return {
      labelCol: {span: 4},
      wrapperCol: {span: 14},
      other: '',
      // selectedItems:[], // 选择的主机id数据
      period_way_choices: [],  // 所有周期类型数据
      host_list: [], // 主机列表数据
      form: {
        task_name: '',
        hosts: [],
        period_way: '1',
        task_cmd: '',
        period_content: '',
      },
      rules: {
        task_name: [
          {required: true, message: '请输入任务名称', trigger: 'blur'},
        ],


      },
    };
  },
  components: {
    editor: require('vue2-ace-editor'),
  },
  created() {
    // 获取所有主机数据
    this.get_host_list();
    // 获取计划任务的周期类型选项数据
    this.get_period_data();
  },

  methods: {
    get_period_data() {
      this.$axios.get(`${this.$settings.host}/schedule/periods/`)
        .then((res) => {
          this.period_way_choices = res.data;
          console.log(this.period_way_choices);
        }).catch((error) => {
      })
    },

    get_host_list() {
      let token = sessionStorage.token || localStorage.token;
      this.$axios.get(`${this.$settings.host}/host/host/`, {
        headers: {
          Authorization: "jwt " + token
        }
      })
        .then((res) => {
          this.host_list = res.data;
        })

    },

    editorInit: function () {
      require('brace/ext/language_tools') //language extension prerequsite...
      require('brace/mode/html')
      require('brace/mode/javascript')    //language
      require('brace/mode/less')
      require('brace/theme/chrome')
      require('brace/snippets/javascript') //snippet
    },

    handlePeriodChange(value) {
      console.log(`selected ${value}`);
      this.form.period_way = value;
    },

    handleHostChange(value) {
      this.form.hosts = value;
      // console.log(typeof value);
      // console.log(value[1]);
      console.log(`selected hosts ${this.form.hosts}`);
    },

    onSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.form);
          this.$axios.post(`${this.$settings.host}/schedule/tasks/`, this.form)
            .then((res) => {
              console.log(res.data);
            })

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>


<style scoped>

</style>
